<template>
  <div class="add">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <el-alert
        title="消息提示的文案"
        type="info"
        :closable="false"
        center
        show-icon
      >
      </el-alert>
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <el-tabs tab-position="left" @tab-click="tabs">
        <el-tab-pane name="0" label="用户管理">
          <!-- ===============表格=========== -->
          <el-form
            label-position="top"
            ref="form"
            :model="form"
            label-width="80px"
          >
            <el-form-item label="商品名称">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
              <el-input v-model="form.Price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量">
              <el-input v-model="form.weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量">
              <el-input v-model="form.count"></el-input>
            </el-form-item>
            <el-form-item label="商品分类">
              <el-cascader
                v-model="form.cat_name"
                :options="options"
                :props="configure"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane name="1" label="商品参数">
          
        </el-tab-pane>
        <el-tab-pane name="2" label="商品属性">商品属性</el-tab-pane>
        <el-tab-pane name="3" label="商品图片">商品图片</el-tab-pane>
        <el-tab-pane name="4" label="商品内容">商品内容</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
 
<script>
import { All } from "../../utils/API";
export default {
  data() {
    return {
      // 进度条
      active: 0,
      // 基本数据
      form: {
        username: "",
        Price: "",
        weight: "",
        count: "",
        cat_name: "",
      },
      // 商品分类的配置
      // 联接器
      cat_name: [],
      options: [],
      configure: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
    };
  },
  async created() {
    let res = await All("/categories", {}, "get");
    console.log(res.data.data);
    this.options = res.data.data;
  },
  mounted() {},
  methods: {
    // 联接器
    handleChange(value) {
      console.log(value);
    },
    // 对应进度条
    tabs(e) {
      this.active = Number(e.name);
    },
  },
};
</script>
 
<style lang = "scss" scoped>
.add {
  width: 100%;
  height: 100%;
  background-color: #eaedf1;
  .el-breadcrumb {
    line-height: 50px;
    text-indent: 1em;
  }
  .content {
    width: 95%;
    background-color: white;
    box-sizing: border-box;
    padding: 20px;
    margin: 0 auto;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
  }
  .el-steps--horizontal {
    padding-top: 30px;
  }
}
</style>